<%@ page language="java" contentType="text/html; charset=utf-8"
	pageEncoding="utf-8"%>
<%@ page import="java.io.*, java.sql.*, java.util.*,LS.*, date.*"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%@ taglib prefix="fmt" uri="http://java.sun.com/jsp/jstl/fmt" %>


<!DOCTYPE html>
<html lang="UTF-8">
<style>
body,table,tr,td,select,input,div,form,textarea,font{font-family:Mond; font-size=12pt; } 
table {
	width: 90%;
	margin-left: 20px;
}

.panality {
	font-weight: bolder;
	color: red;
}

.title {
	width: 20%;
	margin: 0px;
	font-weight: bolder;
	padding: 10px;
	padding-right: 20px;
	text-align: right;
}
/* td,tr{ */
/* 	font-weight:bolder; */
/* 	padding:10px; */
/* } */
#outerview {
	padding-top: 10px;
	margin-left: 0px;
	text-align: center;
	background-color: #fff;
	border: 1px solid #e5e5e5;
	-webkit-border-radius: 5px;
	-moz-border-radius: 5px;
	border-radius: 5px;
	-webkit-box-shadow: 0 1px 2px rgba(0, 0, 0, .05);
	-moz-box-shadow: 0 1px 2px rgba(0, 0, 0, .05);
	box-shadow: 0 1px 2px rgba(0, 0, 0, .05);
}

#outerview {
	width: 100%;
	min-height: 550px;
	padding: 0px;
}

#middleview {
	width: 90%;
	height: 420px;
	margin: 0px auto 0px auto;
	left: 50%;
}

#innerview {
	margin-top: 30px;
	width: 100%;
	height: 100%;
	text-align: center;
	background-color: #fff;
	border: 1px solid #e5e5e5;
	-webkit-border-radius: 5px;
	-moz-border-radius: 5px;
	border-radius: 5px;
	-webkit-box-shadow: 0 1px 2px rgba(0, 0, 0, .05);
	-moz-box-shadow: 0 1px 2px rgba(0, 0, 0, .05);
	box-shadow: 0 1px 2px rgba(0, 0, 0, .05);
}

#picture {
	padding-top: 10px;
	width: 200px;
	height: 100%;
	text-align: right;
	background-color: #fff;
	border: 1px solid #e5e5e5;
	-webkit-border-radius: 5px;
	-moz-border-radius: 5px;
	border-radius: 5px;
	-webkit-box-shadow: 0 1px 2px rgba(0, 0, 0, .05);
	-moz-box-shadow: 0 1px 2px rgba(0, 0, 0, .05);
	box-shadow: 0 1px 2px rgba(0, 0, 0, .05);
}

.btntd {
	text-align: center;
}

.rightdiv {
	text-align: right;
}

#addsuccess {
	border: 1px solid #000000;
}
</style>

<head>
	
	<meta charset="utf-8">
	<title>성공회대학교 기자재 대여 시스템</title>
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	
	<!-- styles시트 -->
	<link href="/LSsystem/assets/css/bootstrap.css" rel="stylesheet">
	<link href="/LSsystem/assets/css/bootstrap-responsive.css" rel="stylesheet">
	<link href="/LSsystem/assets/css/docs.css" rel="stylesheet">
	
	<script type="text/javascript" src="http://code.jquery.com/jquery-1.9.1.min.js"></script>    
	<script type="text/javascript">

		function selectMail(selected) {
			
			var mail = $(selected).val();
			
			if($('#direct').val() == $(selected).val()) {
				$('#mailDomain').val("");
				$('#mailDomain').removeAttr('readonly');
			} else {
				$('#mailDomain').val(mail);
				$('#mailDomain').attr('readonly', 'ture');
			}
		}
		
		var account_regex = /^([\w\.-]+)$/;
		var domain_regex = /^([a-z\d\.-]+)\.([a-z\.]{2,6})$/;
		var num2_regex = /^[0-9]{3,4}$/;
		var num3_regex = /^[0-9]{4}$/;
		
		function modifyBtnClick() {
			// 비밀번호가 빈칸 일경우
			if($('#pw').val() == "") {
				alert("비밀번호를 입력하세요.");
			}
			// 이메일 빈칸 일경우
			else if($('#mailAccount').val() == ""
					|| $('#mailDomain').val() == ""
					) {
				alert("이메일을 입력하세요.");
			}
			// 번호 빈칸 일경우
			else if($('#p1').val() == ""
					|| $('#p2').val() == ""
					|| $('#p3').val() == "") {
				alert("연락처를 입력하세요.");
			}
			// 변경 사항이 없을경우
			else if($('#mailAccount').val() == $('#userMAccount').val()
					&& $('#mailDomain').val() == $('#userMDomain').val()
					&& $('#p1').val() == $('#userPNum1').val()
					&& $('#p2').val() == $('#userPNum2').val()
					&& $('#p3').val() == $('#userPNum3').val()
					) {
				alert("변경사항이 없습니다.");
			}
			// domain 형식이 맞지 않을경우
			else if(account_regex.test($('#mailDomain').val()) == false || domain_regex.test($('#mailDomain').val()) == false) {
				alert("메일 형식이 잘못되었습니다.");
			}
			// 연락처 형식이 맞지 않을경우
			else if(num2_regex.test($('#p2').val()) == false || num3_regex.test($('#p3').val()) == false) {
				alert("연락처 형식이 잘못되었습니다.");
			}
			// 성공(비밀번호 검사는 컨트롤러 에서)
			else if(confirm("변경 하시겠습니까?")){
			
				var inE = $('#mailAccount').val() + "@" + $('#mailDomain').val();
				$('#inputEmail').val(inE);
				
				var inP = $('#p1').val() + "-" + $('#p2').val() + "-" + $('#p3').val();
				$('#inputPhone').val(inP);
				
				$('#fm').submit();
			}
		}
		
		
		/* 
		function doAjax() {
			alert("ajax 수행");
			$.ajax({
					url : 'checkPassword.do',
					type : 'POST',
					data : ({
						pw : $('#pw').val()
					}),
					success : function(data) {
						$('#checkPW').val(data);
					}
				});
		}
		 */
		
	</script>
</head>

<body data-spy="scroll" data-target=".bs-docs-sidebar">
	<!-- 메뉴
    ================================================== -->
    
    
	<%
	Users u = (Users)session.getAttribute("user");
	if(u==null) {%>
	<jsp:include page="/top.do"></jsp:include>
	<%}else{
	    	if(u.getUser_position().equalsIgnoreCase("S")){%>
	<!-- 학생이 로그인 했을 경우 메뉴 -->
	<jsp:include page="/studenttop.do"></jsp:include>
	<%}else if(u.getUser_position().equalsIgnoreCase("P")) {%>
	<!-- 교수가 로그인 했을 경우 메뉴 -->
	<jsp:include page="/teachertop.do"></jsp:include>
	<%}else{%>
	<!-- 관리자가 로그인 했을 경우 메뉴 -->
	<jsp:include page="/managertop.do"></jsp:include>
	<%}}%>
	<!-- 게시판
    ================================================== -->
	<div style="text-align: center">
		<div class="marketing"
			style="margin-bottom: 30px; color: #000; text-align: left">
			<div class="container">
				<h3 style="margin: 10px; font-size: 35px;">
					<strong>내 정보</strong>
				</h3>
			</div>
		</div>
	</div>
	
	<div class="container">
		<div id="outerview">
			<div id="middleview">
				<% if(u != null) { %>
				<div id="innerview">
					<div class="control-gruop">
					
						<form id="fm" action="modifyBtn.do" method="post" class="form-inline" style="text-align: left;">
							<div class="controls">
								<br>
								<table>
									<tr>
										<td class="title">이름</td>
										<td><%= u.getName() %></td>
									</tr>
									<tr>
										<td class="title">소속</td>
										<td>${ departments[0].departments_name }</td>
									</tr>
									<tr>
										<td class="title">학년</td>
										<td><%= u.getGrade() %></td>
									</tr>
									<tr>
										<td class="title">아이디</td>
										<td><%= u.getUser_id() %></td>
									</tr>
									
									<tr>
										<td class="title">비밀번호</td>
										<td><input type="password" id="pw" name="pw" class="input-middle"></td>
									</tr>
									
									<!-- 
									<tr>
										<td class="title">비밀번호 확인</td>
										<td><input type="text" class="input-middle"></td>
									</tr>
									 -->
									<tr>
										<td class="title">E-mail</td>
										<td>
										
										<%
											String account = u.getEmail().split("@")[0];
											String domain = u.getEmail().split("@")[1];
										%>
										
										<input id="mailAccount" value="<%= account %>" type="text" class="span2">&nbsp;@
										<input id="mailDomain"  value="<%= domain %>" type="text" class="span2">
										<select id="mailDomainList" onchange="selectMail(this)" class="span2">
											
											<option id="direct">직접 입력.</option>
											<option>skhu.ac.kr</option>
											<option>naver.com</option>
											<option>hanmail.net</option>
											<option>gmail.com</option>
											<option>hotmail.com</option>
											<option>nate.com</option>
										</select>
										</td>
									</tr>
									<tr>
									
										<%
											String pNum1 = u.getPhone().split("-")[0];
											String pNum2 = u.getPhone().split("-")[1];
											String pNum3 = u.getPhone().split("-")[2];
											String s010 = "";
											String s011 = "";
											String s017 = "";
											String s018 = "";
											
											if(pNum1.equals("010")) {
												s010 = "selected";
											} else if(pNum1.equals("011")) {
												s011 = "selected";
											} else if(pNum1.equals("017")) {
												s017 = "selected";
											} else if(pNum1.equals("018")) {
												s018 = "selected";
											}
										%>
										
										<td class="title">연락처</td>
										<td>
										<select id="p1" class="span1">
											<option>000</option>
											<option <%= s010 %>>010</option>
											<option <%= s011 %>>011</option>
											<option <%= s017 %>>017</option>
											<option <%= s018 %>>018</option>
										</select>&nbsp;-
										<input id="p2" type="text" value="<%= pNum2 %>" class="span1">&nbsp;-
										<input id="p3" type="text" value="<%= pNum3 %>" class="span1">
										</td>
									</tr>
									<tr>
										<td class="title">패널티 적용일</td>
										<td class="panality">
										<fmt:formatDate pattern="yyyy년 MM월 dd일 까지 대여 불가" value="<%= u.getPenalty() %>" />
										</td>
										
									</tr>
									
								</table>
							</div>
							
							<input id="userMAccount" type="hidden" value="<%=account%>">
							<input id="userMDomain" type="hidden" value="<%=domain%>">
							<input id="userPNum1" type="hidden" value="<%=pNum1%>">
							<input id="userPNum2" type="hidden" value="<%=pNum2%>">
							<input id="userPNum3" type="hidden" value="<%=pNum3%>">
							
							
							<input id="inputEmail" name="inputEmail" type="hidden">
							<input id="inputPhone" name="inputPhone" type="hidden">
							
						</form>
					</div>
				</div>
				<div class="rightdiv">
					<button onclick="modifyBtnClick()" class="btn" id="modifyBtn">수정 완료</button>
				</div>
				<% } %>
			</div>
		</div>
	</div>
	<!-- 꼬리말
    ================================================== -->
	<footer class="footer">
		<div class="container">
			<p>Copyright SKHU. Software Student.</p>
		</div>
	</footer>

	<!-- javascript -->
	<script src="/LSsystem/assets/js/jquery.js"></script>
	<script type="text/javascript" src="/LSsystem/assets/js/bootstrap.js"></script>
	<script type="text/javascript">
		$(document).ready(function() {
			$('.dropdown-toggle').dropdown();
		});
	</script>
</body>
</html>
